<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/jsphead.jsp" %>
<html>
<head>
	<title> ${appTitle} - <s:property value="book.name"/></title>
	<link rel="stylesheet" type="text/css" href="css/default.css"/>
	<link rel="stylesheet" type="text/css" href="jslib/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
	<style type="text/css">
		body{text-align:center;margin:5px 0px 10px 0px;}
		#container{width:830px;margin-left:auto;margin-right:auto;text-align:left;}
		
		#tabbar{border-bottom:1px solid #aaa;text-align:left;margin-top:16px;height:26px;}
		.tab{
			float:left;background-color:#e4d7ca;line-height:25px; padding:0px 8px; margin-right:3px;
			border-left: 1px solid #aaa;border-top: 1px solid #aaa;border-right: 1px solid #aaa; cursor:default;
		}
		.tab-active{font-weight:bold;background-color:#cbb198;color:#000;}
		
		.page {border:1px solid #aaa;padding:2px 4px;}
		.page:hover{background-color:#eee; color:#00f;}
		#header{font-size:32px;font-weight:bold;border-bottom:2px solid #999;
			text-align:center;margin-bottom:15px;padding-bottom:10px;}
		.item { width:130px;height:190px;margin-right:5px;float:left;}
		.img1{width:120px;height:150px;border:1px solid #aaa;cursor:pointer;}
		.desc{text-align:center;font-size:13px;margin-top:5px;}
	</style>
	<script type="text/javascript" src="jslib/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jslib/fancybox/jquery.fancybox-1.3.4.js"></script>
	<script type="text/javascript" src="jslib/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript">
		$(function(){
			$("a[rel=photo]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});
		});
	</script>
</head>
<body>
	<div id="container">
		<div style="text-align:left;margin-bottom:10px;font-size:12px;">
			<div style="float:left;">
				<a class="a1" href="${baseHref}"><img src="image/ln_title.gif" style="width:200px;border:none;"/></a>
			</div>
			<div style="float:left;padding:7px 0 0 7px;font-size:12px;">
				<a class="a1" href="${baseHref}">首页</a> > 图片库
			</div>
			<div style="clear:both;"></div>
		</div>
		<div id="tabbar">
			<s:iterator value="photoFolders" status="sts">
				<s:if test="pfIdx==#sts.index">
					<div class="tab tab-active"><s:property value="folderName"/>(<s:property value="photoCount"/>)</div>
				</s:if>
				<s:else>
					<div class="tab">
						<a class="a1" href="?pfIdx=<s:property value="#sts.index"/>"><s:property value="folderName"/>(<s:property value="photoCount"/>)</a>
					</div>
				</s:else>
			</s:iterator>
		</div>
		<s:if test="page.totalItems > 0">
			<div id="photos" style="padding-left:10px;margin-top:5px;">
				<s:iterator value="page.result">
					<div class="item">
						<div>
							 <a rel="photo" href="view!showImage.action?pfIdx=<s:property value="pfIdx"/>&photoName=<s:property value="fileName"/>" title="<s:property value="text"/>">
							 	<img src="view!showMinImage.action?pfIdx=<s:property value="pfIdx"/>&photoName=<s:property value="fileName"/>" style="border:none;">
							 </a>
						</div>
						<div class="desc"><s:property value="text"/></div>
					</div>
				</s:iterator>
			</div>
			<div style="clear:both;"></div>
			<%-- 分页条 --%>
			<s:if test="page.slider.size > 1">
			<div style="padding:5px 5px 8px 10px;font-size:14px; text-align:center;">
				第
				<s:iterator value="page.slider">
					<s:if test="page.pageNo==top"><strong><s:property/></strong></s:if>
					<s:else><a class="page" href="?pfIdx=<s:property value="pfIdx"/>&page.pageSize=<s:property value="page.pageSize"/>&page.pageNo=<s:property value="top"/>"><s:property/></a></s:else>
				</s:iterator>
				页
			</div>
			</s:if>
		</s:if>
		<s:else>
			<div style="margin-top:80px;text-align:center;">
				&lt;当前目录没有图片&gt;
			</div>
		</s:else>
	</div>
</body>